<template>
  <view class="container">
    <div class="page-top">
    </div>
    <div class="gybody">
<!--      <div class="denglu1">-->
<!--        <ul class="denglu_bd hzly">-->
<!--          <li class="input">-->
<!--            <van-field placeholder="请输入账号名/手机号" :value="userInfo.username" maxlength="18"-->
<!--                       label="账号"></van-field>-->
<!--          </li>-->
<!--          <li class="input">-->
<!--            <van-field placeholder="请输入密码" :value="userInfo.password" maxlength="20" label="密码"-->
<!--                       password></van-field>-->
<!--          </li>-->
<!--          <li class="msg flexce">-->
<!--            <text class="msg_input" @click="toVerifyLogin">验证码登录</text>-->
<!--            <p>|</p>-->
<!--            <text class="msg_input" @click="toRegister">快速注册</text>-->
<!--            <p>|</p>-->
<!--            <text class="msg_input getPassword" @click="toFindPassword">找回密码</text>-->
<!--          </li>-->
<!--          <li class="anniu  denglu-anniu">-->
<!--            <view class="button" @click="to_index">登录</view>-->
<!--            &lt;!&ndash;            <van-button type="primary" @click="to_car">路由跳转</van-button>&ndash;&gt;-->
<!--          </li>-->
<!--        </ul>-->

<!--      </div>-->
      <div class="denglu2">
        <div class="wxlogin" @click="getUserInfo">
          <img src="/static/images/kjdl1.png" style="height:30px;width:36px;"/>
          <p style="font-size: 14px;line-height: 32px;">微信登录</p>
        </div>
      </div>


    </div>

    <van-toast id="van-toast"/>
  </view>
</template>
<script>
import user_store from "@/store/index";
import Toast from "../../../static/vant/toast/toast";
import {getOpenId, doLogin} from "../../requests/user";

let $this
export default {
  name: "index",
  data() {
    return {
      userInfo: {
        username: "",
        password: "",
        verify_code: "",
        confirm_password: ""
      },
      userData: {}
    }
  },
  methods: {
    getUserInfo() {
      wx.login({
        success(res) {

          if (res.code) {
            //获取用户openid
            getOpenId(res.code).then(res => {
              if (res.data.openid) {
                user_store.setters.setOpenId(res.data.openid)
                doLogin(res.data.openid).then(res => {
                  let resp = res.data
                  if (resp.code === 0) {
                    user_store.setters.set_user_token(resp.data.token)

                    mpvue.redirectTo({
                      url: "/pages/user/index/main",
                    })

                  }
                })
              }
            })
          }else {
            Toast.fail('登录失败！' + res.errMsg)
          }
        }
      })

    },

    to_index() {
      mpvue.redirectTo({
        url: "/pages/user/index/main",
      });
    },
    to_car() {
      mpvue.navigateTo({
        url: "/pages/merchant/car/main",
      });
    },
    toVerifyLogin(){
      mpvue.navigateTo({
        url: "/pages/merchant/verify_login/main",
      });
    },
    toFindPassword(){
      mpvue.navigateTo({
        url: "/pages/merchant/find_password/main",
      });
    },
    toRegister(){
      mpvue.navigateTo({
        url: "/pages/merchant/register/main",
      });
    }
  },
  created() {
    $this = this
  },
  onShow() {
  },
}
</script>
<style>
.page-top {
  height: 110px;
  overflow: hidden;
  background-image: url("http://aczxsj.ctmon.com.cn/pc/acimg/a1.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 50px;
  position: relative;
}

.gybody {
  position: relative;
  top: -30px;
  width: 90%;
  margin: auto;
  /* border-radius: 18px; */
}

.denglu1 {
  padding: 35px 20px;
  background-color: white;
  border-radius: 18px;
}
.denglu_bd .input {
  border-bottom: 1px solid hsl(0deg 0% 40% / 14%);
  margin-bottom: 20px;
  position: relative;
}
.denglu_bd .msg {
  margin: 40px 0;
  font-size: 12px;
}
.denglu_bd .msg .msg_input{
  padding: 0px 10px;
  color: #0081ff;
}
.flexce {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}
.denglu_bd .anniu {
  text-align: center;
  margin-bottom: 30px;
}
.denglu_bd .anniu .button {
  display: inline-block;
  font-size: 18px;
  background-color: #6c77ad;
  color: white;
  padding: 10px 30%;
  border-radius: 24px;
  background-size: cover;
}
.denglu2 {
  padding: 20px;
  background-color: white;
  border-radius: 18px;
  margin-top: 25px;
}
.wxlogin {
  text-align: center;
}

.button {
  border: none !important;
}

</style>
